import Footer from '@/components/commonFooter';
import { Breadcrumb, Col, Row, Card, Button, Input, Popconfirm,message } from 'antd';
import { useEffect, useState } from 'react';
import {
  Link,
  OwnspaceModelState,
  useDispatch,
  useSelector,
  CategoryModelState,
} from 'umi';
import style from './index.less';
import './default.less';
function Category() {
  const { categoryList } = useSelector(
    (state: { ownspace: OwnspaceModelState }) => state.ownspace,
  );
  const { categoryDetail, categoryAdd, categoryDel } = useSelector(
    (state: { category: CategoryModelState }) => state.category,
  );
  const dispatch = useDispatch();
  const [flag, flagSet] = useState(false);
  const [name, setName] = useState('');
  const [value, setValue] = useState('');
  const [id, setId] = useState('');
  const onChangeName = (e: any) => {
    setName(e.target.value);
  };
  const onChangeValue = (e: any) => {
    setValue(e.target.value);
  };
  const onCancelAdding = () => {
    flagSet(false);
    setName('');
    setValue('');
  };
  useEffect(() => {
    dispatch({
      type: 'ownspace/getCategoryList',
    });
  }, [categoryDetail, categoryAdd, categoryDel]);
  const onAdd = () => {
    dispatch({
      type: 'category/getCategory',
      payload: {
        id: id,
        label: name,
        value: value,
      },
    });
    flagSet(false);
    setName('');
    setValue('');
    message.success('更新分类成功');
    dispatch({
      type: 'ownspace/getCategoryList',
    });
  };
  function onBtn(item: any) {
    flagSet(true);
    setName(item.label);
    setValue(item.value);
    setId(item.id);
  }
  return (
    <>
      <div className={style.category_header}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/">工作台</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/article">所有文章</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/article/category">分类管理</Link>
          </Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="category_main">
        <Row
          className={style.category_main_administration}
          style={{
            marginLeft: '-8px',
            marginRight: '-8px',
            rowGap: '0px',
          }}
        >
          <Col span={9} style={{ paddingLeft: '8px', paddingRight: '8px' }}>
            <Card size="small" title={flag ? '管理分类' : '添加分类'}>
              <Row
                style={{
                  rowGap: '0px',
                }}
              >
                <Col
                  style={{
                    position: 'relative',
                    maxWidth: '100%',
                    minHeight: '1px',
                    margin: '0 0 24px',
                  }}
                >
                  <Input
                    placeholder="输入分类名称"
                    value={name}
                    onChange={onChangeName}
                  />
                </Col>
              </Row>
              <Row
                style={{
                  rowGap: '0px',
                }}
              >
                <Col
                  style={{
                    position: 'relative',
                    maxWidth: '100%',
                    minHeight: '1px',
                    margin: '0 0 24px',
                  }}
                >
                  <Input
                    placeholder="输入分类值（请输入英文，作为路由使用）"
                    value={value}
                    onChange={onChangeValue}
                  />
                </Col>
              </Row>
              {flag ? (
                <div className={style.btn_show}>
                  <div>
                    <Button
                      type="primary"
                      onClick={onAdd}
                    >
                      更新
                    </Button>
                    <Button type="dashed" onClick={onCancelAdding}>
                      返回添加
                    </Button>
                  </div>
                  <Popconfirm
                    title="确认删除这个分类?"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={() => {
                      dispatch({
                        type: 'category/delCategory',
                        payload: {
                          id: id,
                        },
                      });
                      flagSet(false);
                      setName('');
                      setValue('');
                      message.success('删除分类成功');
                    }}
                  >
                    <Button danger>删除</Button>
                  </Popconfirm>
                </div>
              ) : (
                <div className={style.btn_show}>
                  <Button
                    type="primary"
                    onClick={() => {
                      if (name) {
                      dispatch({
                        type: 'category/putCategory',
                        payload: {
                          label: name,
                          value: value,
                        },
                      });
                      flagSet(false);
                      setName('');
                      setValue('');
                      message.success('添加分类成功');
                    }}
                  }
                  >
                    保存
                  </Button>
                </div>
              )}
            </Card>
          </Col>
          <Col span={15} style={{ paddingLeft: '8px', paddingRight: '8px' }}>
            <Card size="small" title="所有分类">
              <ul className={style.category_ul}>
                {categoryList.length
                  ? categoryList.map((item, index) => {
                      return (
                        <li key={index} onClick={onBtn.bind(index, item)}>
                          <span>{item.label}</span>
                        </li>
                      );
                    })
                  : null}
              </ul>
            </Card>
          </Col>
        </Row>
        <Footer></Footer>
      </div>
    </>
  );
}
export default Category;
